{% extends 'v2ray/base.html' %} 

{% block title %}{{ _('system status') }}{% endblock %} 
{% block head %} 
  {{ super() }}
  <style>
    .ant-col-sm-24 {
      margin-top: 10px;
    }
  </style>
{% endblock %} 

{% block body %}
  <a-layout id="app" v-cloak>
    {% include 'common/common_sider.html' %}
    <a-layout id="content-layout">
      <a-layout-content>
        <a-spin :spinning="spinning" :delay="200" :tip="loadingTip">
          <transition name="list" appear>
            <a-row>
              <a-card hoverable>
                <a-row>
                  <a-col :sm="24" :md="12">
                    <a-row>
                      <a-col :span="12" style="text-align: center">
                        <a-progress
                          type="dashboard"
                          status="normal"
                          :stroke-color="status.cpu.color"
                          :percent="status.cpu.percent"
                        ></a-progress>
                        <div>CPU</div>
                      </a-col>
                      <a-col :span="12" style="text-align: center">
                        <a-progress
                          type="dashboard"
                          status="normal"
                          :stroke-color="status.memory.color"
                          :percent="status.memory.percent"
                        ></a-progress>
                        <div>
                          {{ _('memory') }}: [[ sizeFormat(status.memory.used) ]] / [[
                          sizeFormat(status.memory.total) ]]
                        </div>
                      </a-col>
                    </a-row>
                  </a-col>
                  <a-col :sm="24" :md="12">
                    <a-row>
                      <a-col :span="12" style="text-align: center">
                        <a-progress
                          type="dashboard"
                          status="normal"
                          :stroke-color="status.swap.color"
                          :percent="status.swap.percent"
                        ></a-progress>
                        <div>
                          swap: [[ sizeFormat(status.swap.used) ]] / [[ sizeFormat(status.swap.total)
                          ]]
                        </div>
                      </a-col>
                      <a-col :span="12" style="text-align: center">
                        <a-progress
                          type="dashboard"
                          status="normal"
                          :stroke-color="status.disk.color"
                          :percent="status.disk.percent"
                        ></a-progress>
                        <div>
                          {{ _('disk') }}: [[ sizeFormat(status.disk.used) ]] / [[
                          sizeFormat(status.disk.total) ]]
                        </div>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </a-card>
            </a-row>
          </transition>
          <transition name="list" appear>
            <a-row gutter="16">
              <a-col :sm="24" :md="12">
                <a-card hoverable>
                  {{ v2_core }} {{ _('status') }}:
                  <a-tag :color="status.v2.color">[[ status.v2.stat ]]</a-tag>
                  <a-tooltip v-if="status.v2.stat === '{{ _('error') }}'">
                    <template slot="title">
                      <p v-for="line in status.v2.error_msg.split('\n')">[[ line ]]</p>
                    </template>
                    <a-icon type="question-circle" theme="filled"></a-icon>
                  </a-tooltip>
                  {% if is_admin %}
                  <a-tag color="green" @click="openSelectV2rayVersion">[[ status.v2.version ]]</a-tag>
                  <a-tag color="blue" @click="openSelectV2rayVersion"
                    >{{ _('Switch version') }}</a-tag
                  >
                  {% else %}
                  <a-tag color="green">[[ status.v2.version ]]</a-tag>
                  {% endif %}
                </a-card>
              </a-col>
              <a-col :sm="24" :md="12">
                <a-card hoverable>
                  {{ _('uptime') }}: <a-tag color="#87d068">[[ status.uptime ]]</a-tag>
                  <a-tooltip>
                    <template slot="title">
                      {{ _('The running time of the system since boot.') }}
                    </template>
                    <a-icon type="question-circle" theme="filled"></a-icon>
                  </a-tooltip>
                </a-card>
              </a-col>
              <a-col :sm="24" :md="12">
                <a-card hoverable>
                  {{ _('loads') }}: [[ status.loads[0] ]] | [[ status.loads[1] ]] | [[ status.loads[2]
                  ]]
                </a-card>
              </a-col>
              <a-col :sm="24" :md="12">
                <a-card hoverable>
                  tcp / udp {{ _('connections') }}: [[ status.tcp_count ]] / [[ status.udp_count ]]
                  <a-tooltip>
                    <template slot="title">
                      {{ _('The number of connections for the entire system, not v2ray.') }}
                    </template>
                    <a-icon type="question-circle" theme="filled"></a-icon>
                  </a-tooltip>
                </a-card>
              </a-col>
              <a-col :sm="24" :md="12">
                <a-card hoverable>
                  <a-row>
                    <a-col :span="12">
                      <a-icon type="arrow-up"></a-icon> [[ status.net_io.up ]] / S
                      <a-tooltip>
                        <template slot="title"> {{ _('Total upload speed of all NICs.') }} </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                      </a-tooltip>
                    </a-col>
                    <a-col :span="12">
                      <a-icon type="arrow-down"></a-icon> [[ status.net_io.down ]] / S
                      <a-tooltip>
                        <template slot="title">
                          {{ _('Total download speed of all NICs.') }}
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-card>
              </a-col>
              <a-col :sm="24" :md="12">
                <a-card hoverable>
                  <a-row>
                    <a-col :span="12">
                      <a-icon type="cloud-upload"></a-icon> [[ status.net_traffic.sent ]]
                      <a-tooltip>
                        <template slot="title">
                          {{ _('Total upload traffic for all NICs since boot.') }}
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                      </a-tooltip>
                    </a-col>
                    <a-col :span="12">
                      <a-icon type="cloud-download"></a-icon> [[ status.net_traffic.recv ]]
                      <a-tooltip>
                        <template slot="title">
                          {{ _('Total download traffic for all NICs since boot.') }}
                        </template>
                        <a-icon type="question-circle" theme="filled"></a-icon>
                      </a-tooltip>
                    </a-col>
                  </a-row>
                </a-card>
              </a-col>
            </a-row>
          </transition>
        </a-spin>
      </a-layout-content>
    </a-layout>
    <a-modal
      id="version-modal"
      v-model="versionModal.visible"
      title="{{ _('Switch %(v2_core)s version', v2_core=v2_core) }}"
      :closable="true"
      @ok="() => versionModal.visible = false"
      ok-text="{{ _('confirm') }}"
      cancel-text="{{ _('close') }}"
    >
      <h2>{{ _('Click on the %(v2_core)s-core version you want to switch.', v2_core=v2_core) }}</h2>
      <h2>
        {{ _('Please choose carefully, the old version may be incompatible with the configuration.') }}
      </h2>
      <template v-for="version, index in versionModal.versions">
        <a-tag
          :color="index % 2 == 0 ? 'blue' : 'green'"
          style="margin: 10px"
          @click="switchV2rayVersion(version)"
        >
          [[ version ]]
        </a-tag>
      </template>
    </a-modal>
  </a-layout>
{% endblock %} 

{% block scripts %} 
  {{ super() }}
  <script>
    let status = {
      v2: {
        color: "",
        stat: "{{ _('loading') }}",
      },
      uptime: "{{ _('loading') }}",
      cpu: { percent: 0 },
      memory: { percent: 0 },
      swap: { percent: 0 },
      disk: { percent: 0 },
      net_io: { up: "..", down: ".." },
      net_traffic: { sent: "..", recv: ".." },
      loads: ["..", "..", ".."],
      tcp_count: "..",
      udp_count: "..",
    };

    const versionModal = {
      visible: false,
      versions: [],
      show(versions) {
        this.visible = true;
        this.versions = versions;
      },
      hide() {
        this.visible = false;
      },
    };

    let app = new Vue({
      delimiters: ["[[", "]]"],
      el: "#app",
      data: {
        status,
        versionModal,
        spinning: false,
        loadingTip: "{{ _('loading') }}",
      },
      methods: {
        loading(spinning, tip = "{{ _('loading') }}") {
          this.spinning = spinning;
          this.loadingTip = tip;
        },
        getStatus() {
          get({
            url: "/server/status",
            success: (data) => {
              this.setStatus(data);
            },
          });
        },
        setStatus(status) {
          switch (status.v2.code) {
            case 0:
              status.v2.stat = "{{ _('running') }}";
              status.v2.color = "#67C23A";
              break;
            case 1:
              status.v2.stat = "{{ _('not running') }}";
              status.v2.color = "#E6A23C";
              break;
            default:
              status.v2.stat = "{{ _('error') }}";
              status.v2.color = "#F56C6C";
          }
          status.uptime = formatSecond(status.uptime);
          status.cpu.percent = status.cpu.percent.toFixed(2);
          status.memory.percent = ((status.memory.used / status.memory.total) * 100).toFixed(2);
          const swapPercent = (status.swap.used / status.swap.total) * 100;
          status.swap.percent = isNaN(swapPercent) ? 0 : swapPercent.toFixed(2);
          status.disk.percent = ((status.disk.used / status.disk.total) * 100).toFixed(2);
          status.cpu.color = this.computeColor(status.cpu.percent);
          status.memory.color = this.computeColor(status.memory.percent);
          status.swap.color = this.computeColor(status.swap.percent);
          status.disk.color = this.computeColor(status.disk.percent);
          status.net_io.up = sizeFormat(status.net_io.up);
          status.net_io.down = sizeFormat(status.net_io.down);
          status.net_traffic.sent = sizeFormat(status.net_traffic.sent);
          status.net_traffic.recv = sizeFormat(status.net_traffic.recv);
          this.status = status;
        },
        computeColor(percent) {
          if (percent < 80) {
            return "#67C23A";
          } else if (percent < 90) {
            return "#E6A23C";
          } else {
            return "#F56C6C";
          }
        },
        openSelectV2rayVersion() {
          this.loading(true);
          get({
            url: "/server/get_v2ray_versions",
            success: (data) => {
              this.loading(false);
              if (!data.success) {
                return;
              }
              versionModal.show(data.obj);
            },
            error: () => {
              this.loading(false);
            },
          });
        },
        switchV2rayVersion(version) {
          this.$confirm({
            title: "{{ _('Switch %(v2_core)s version', v2_core=v2_core) }}",
            content: "{{ _('Are you sure you want to switch to %(v2_core)s', v2_core=v2_core) }}" 
                     + ` ${version}?`,
            okText: "{{ _('confirm') }}",
            cancelText: "{{ _('cancel') }}",
            onOk: () => {
              versionModal.hide();
              this.loading(true, "{{ _('Installing, please do not leave this page.') }}");
              post({
                url: `/server/install_v2ray/${version}`,
                success: () => {
                  this.loading(false);
                },
                error: () => {
                  this.loading(false);
                },
              });
            },
          });
        },
      },
      mounted() {
        this.setStatus({{ status | safe }});
        setInterval(this.getStatus, 2000);
      },
    });
  </script>
{% endblock %}
